<template>
  <view class="page">
    <view class="header">
      <image class="bg" src="/static/img/user-center-bg.png" mode="widthFix"></image>
      <view class="user-info">
        <view class="avatar-wrap">
          <image class="avatar" src="/static/img/logo.png" mode="widthFix"></image>
        </view>
        <view class="phone">
          {{ form.Phone }}
          <view class="role">普通用户</view>
        </view>
      </view>
    </view>
    <view class="content">
      <!--      <view class="item-wrap" @click="goHelp">-->
      <!--        <view class="icon-wrap">-->
      <!--          <image class="icon" src="/static/img/help.png" mode="widthFix"></image>-->
      <!--        </view>-->
      <!--        <view class="item">-->
      <!--          <text class="desc">使用帮助</text>-->
      <!--          <image class="arrow" src="/static/img/arrow.png" mode="widthFix"></image>-->
      <!--        </view>-->
      <!--      </view>-->
      <view class="item-wrap" @click="goAgreement">
        <view class="icon-wrap">
          <image class="icon" src="/static/img/agreement.png" mode="widthFix"></image>
        </view>
        <view class="item">
          <text class="desc">用户协议</text>
          <image class="arrow" src="/static/img/arrow.png" mode="widthFix"></image>
        </view>
      </view>
      <view class="item-wrap" @click="goPrivacy">
        <view class="icon-wrap">
          <image class="icon" src="/static/img/privacy.png" mode="widthFix"></image>
        </view>
        <view class="item">
          <text class="desc">隐私政策</text>
          <image class="arrow" src="/static/img/arrow.png" mode="widthFix"></image>
        </view>
      </view>
      <view class="item-wrap">
        <view class="icon-wrap">
          <image class="icon" src="/static/img/version.png" mode="widthFix"></image>
        </view>
        <view class="item">
          <text class="desc">发布版本</text>
          <view class="item-inline">
            <text>V{{ versionShort }}</text>
          </view>
        </view>
      </view>
      <view class="item-wrap">
        <view class="icon-wrap">
          <image class="icon" src="/static/img/banbenhao.png" mode="widthFix"></image>
        </view>
        <view class="item">
          <text class="desc">应用版本</text>
          <view class="item-inline">
            <text>V{{ version }}</text>
            <image v-if="showNewVersion" class="new" src="/static/img/new.png" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <view class="item-wrap" @click="onLogout">
        <view class="icon-wrap">
          <image class="icon" src="/static/img/logout.png" mode="widthFix"></image>
        </view>
        <view class="item">
          <text class="desc">退出登录</text>
          <image class="arrow" src="/static/img/arrow.png" mode="widthFix"></image>
        </view>
      </view>
      <view class="item-wrap" @click="onCancelAccount">
        <view class="icon-wrap">
          <image class="icon" src="/static/img/cancel-account.png" mode="widthFix"></image>
        </view>
        <view class="item">
          <text class="desc">注销账号</text>
          <image class="arrow" src="/static/img/arrow.png" mode="widthFix"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { GetDictionaryByType } from '@/utils/api.js'
import { compareVersion } from '@/utils/util.js'
export default {
  name: 'UserCenter',
  components: {
  },
  computed: {
  },
  data() {
    return {
      saveBluetoothDevice_key:"saveBluetoothDevice",//保存到本地存储中的key
      version: '1.0.0',
      versionShort: '',
      showNewVersion: false,
      form: {
        Phone: '',
      }
    }
  },
  onLoad(op) {
    this.form.Phone = this.$store.state.vx_u_info.Phone
    this.getAppInfo()
  },
  methods: {
    getAppInfo() {
      plus.runtime.getProperty(plus.runtime.appid, async wgtinfo => {
        this.version = wgtinfo.version
        this.versionShort = wgtinfo.version.split('.')[0]
        const res = await GetDictionaryByType({ Type: 'LastVersionNumber' })
        if (res.Data.length) {
          const resVersion = res.Data[0].Key
          const hasNewVersion = compareVersion(resVersion, wgtinfo.version)
          this.showNewVersion = hasNewVersion === 1
        }
      })
    },
    goHelp() {
      uni.navigateTo({ url: '/pages/help/index' })
    },
    goAgreement() {
      uni.navigateTo({ url: '/pages/agreement/index' })
    },
    goPrivacy() {
      uni.navigateTo({ url: '/pages/privacy/index' })
    },
    onLogout() {
      uni.showModal({
        title: '提示',
        content: '确定退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            this.$store.commit('logout')
            uni.removeStorageSync(this.saveBluetoothDevice_key)
            uni.reLaunch({ url: '/pages/login/index' })
          }
        }
      })
    },
    onCancelAccount() {
      this.$store.commit('logout')
      uni.removeStorageSync(this.saveBluetoothDevice_key)
      uni.reLaunch({ url: '/pages/login/index' })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 100vw;
  height: 100vh;
  background: #F5F7FB;
}
.header {
  width: 100vw;
  height: 450rpx;
  position: relative;
  .bg {
    width: 100vw;
    height: 450rpx;
  }
  .user-info {
    width: 750rpx;
    height: 135rpx;
    display: flex;
    align-items: center;
    margin-top: 16rpx;
    position: absolute;
    bottom: 73rpx;
    left: 23rpx;
    .avatar-wrap {
      width: 135rpx;
      height: 135rpx;
      border-radius: 50%;
      background-color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }
  }
  .phone {
    font-size: 46rpx;
    color: #FFFFFF;
    margin-left: 15rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
  }
  .role {
    margin-left: 20rpx;
    font-size: 30rpx;
  }
}
.content {
  position: relative;
  width: 704rpx;
  margin: -25rpx auto 0;
  background-color: #ffffff;
  padding: 0 32rpx 15rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  .item-wrap {
    line-height: 103rpx;
    display: flex;
    justify-content: space-between;
    align-content: center;
    .icon-wrap {
      width: 103rpx;
      height: 103rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .icon {
      width: 38rpx;
    }
    .item {
      line-height: 103rpx;
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid rgba(0,0,0,0.05);
      color: #3A3A3A;
      .arrow {
        width: 30rpx;
        margin-right: 10rpx;
      }
    }
    .item-inline {
      display: flex;
      align-items: center;
    }
    .new {
      width: 60rpx;
      height: 60rpx;
      margin-left: 20rpx;
    }
  }
}
</style>
